<template>
    <video
        id="my-video"
        ref="video"
        class="video-js"
        width="600"
        height="400"
    >
        <source :src="videoSrc"/>
    </video>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

import {onMounted, reactive, ref} from 'vue'
export default {
    name: "PlayVideo",
    props:{
        videoSrc:{
            type:String,
            default:''
        }
    },
    setup(props){
        let player = ref(null)
        let options = reactive({
            controls:true, //是否显示播放控件
            loop:false, //是否轮播
            autoplay:false, //是否自动播放
            muted:false, //是否静音
        })
        //开始
        const myPlay = () => {
            player.value.src({ src: props.videoSrc });
            player.value.load(props.videoSrc);
            //设置从多少秒开始播放
            // player.value.currentTime(30);
            player.value.play();
        }
        //暂停
        const myStop = () => {
            player.value.pause()
        }
        //重新加载
        const myReload = () => {
            myStop();
            player.value.load({});
            myPlay();
        }
        //视频前进
        const myForward = () => {
            const currentTime = player.value.currentTime();
            player.value.currentTime(currentTime + 5);
        }
        //视频后退
        const myBack = () => {
            const currentTime = player.value.currentTime();
            player.value.currentTime(currentTime - 5);
        }
        //增大音量
        const myVolumeUp = () => {
            const volumeVideo = player.value.volume()
            player.value.volume(volumeVideo + 0.1);
        }
        //区间循环
        const intervalLoop = () => {
            let loopStartTime = 20;
            let loopEndTime = 30;
            player.value.on("timeupdate", () => {
                var currentTime = player.value.currentTime();
                // 如果当前时间小于起始时间，跳转到起始时间
                if (currentTime < loopStartTime) {
                    player.value.currentTime(loopStartTime);
                }
                // 如果当前时间超过终止时间，跳转到起始时间重新播放
                if (currentTime >= loopEndTime) {
                    player.value.currentTime(loopStartTime);
                }
            })
        }
        //铺满
        const fillVideo = () => {
            // 获取到video的dom，然后设置css属性 objectFit
            document.getElementById('my-video_html5_api').style.objectFit = 'fill'
        }

        onMounted(() => {
            // videojs 函数共有三个参数，第一个参数是绑定播放器的元素，第二参数为 options 对象，提供播放器的配置项，第三个参数为播放器渲染后的回调函数
            player.value = videojs("my-video", options, () => {
                player.value.on("play", () => {
                    console.log('播放')
                })


                player.value.on("ended", () => {
                    console.log('播放完成')
                })
            })

        })
        return {
            myPlay,
            myStop,
            myReload,
            myForward,
            myBack,
            myVolumeUp,
            intervalLoop,
            fillVideo
        }

    }
}
</script>

<style scoped>

</style>